<script setup lang="ts">
import img_displaying from './components/img_displaying.vue';
import event_displaying from './components/event_displaying.vue';

const displaying = ref<string>('imgDisplaying');
</script>

<template>
  <PubPageMain class="max">
    <div class="header">
      <div class="left">
        <a-space>
          <div class="pjTitle">
            图片/视频
          </div>
        </a-space>
      </div>
      <div class="right">
        <a-radio-group v-model:value="displaying">
          <a-radio-button value="imgDisplaying">
            <PictureOutlined />
          </a-radio-button>
          <a-radio-button value="eventDisplaying">
            <BarsOutlined />
          </a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div>
      <img_displaying v-if="displaying === 'imgDisplaying'" class="content" />
      <event_displaying v-if="displaying === 'eventDisplaying'" class="content" />
    </div>
  </PubPageMain>
</template>

<style lang="scss" scoped>
.max {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 95%;
  overflow: auto;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 3vw;
    margin-bottom: 0.5vw;

    .left {
      display: flex;
      align-items: center;

      .pjTitle {
        padding-left: 1vw;
        background: url("@/assets/images/title-left-bg.svg") no-repeat;
      }
    }
  }

  .content {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: 95%;
    // overflow: auto;
    // overflow-y: auto;
  }
}
</style>
